<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="header">
        <a href="/">
          <img src="~@/assets/logo.png" class="logo" alt="logo" />
          <span class="title">Ying Kong Admin</span>
        </a>
      </div>
      <a-menu mode="inline" :open-keys="openKeys" @openChange="onOpenChange">
        <a-sub-menu key="sub1">
          <span slot="title"
            ><a-icon type="mail" /><span>系统账号登录</span></span
          >
          <a-menu-item key="1">
            <router-link to="/home/account"> 平台账号管理-列表 </router-link>
          </a-menu-item>
          <a-menu-item key="2">
            <router-link to="/home/juese"> 角色-列表 </router-link>
          </a-menu-item>
          <a-menu-item key="3">
            <router-link to="/home/quanxian"> 权限-列表 </router-link>
          </a-menu-item>
          <a-menu-item key="4">
            <router-link to="/home/bumen"> 部门-列表 </router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <span slot="title"
            ><a-icon type="appstore" /><span>用户管理</span></span
          >
          <a-menu-item key="5">
            <router-link to="/home/userList"> 用户管理-用户列表 </router-link></a-menu-item>
          <a-menu-item key="6">
            <router-link to="/home/userRenz"> 用户管理-认证管理 </router-link></a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <span slot="title"
            ><a-icon type="appstore" /><span>圈子管理</span></span
          >
          <a-menu-item key="7"> 
            <router-link to="/home/community"> 社区管理 </router-link>
          </a-menu-item>
          <a-menu-item key="8">
            <router-link to="/home/report"> 帖子管理 </router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub4">
          <span slot="title"
            ><a-icon type="appstore" /><span>订单管理</span></span
          >
          <a-menu-item key="9"> 寄样订单 </a-menu-item>
          <a-menu-item key="10"> 遛狗订单 </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub5">
          <span slot="title"
            ><a-icon type="appstore" /><span>寄养所管理</span></span
          >
          <a-menu-item key="11"> 寄养所管理 </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub6">
          <span slot="title"
            ><a-icon type="appstore" /><span>领养管理</span></span
          >
          <a-menu-item key="13"> 领养信息列表 </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub7">
          <span slot="title"
            ><a-icon type="appstore" /><span>运营管理</span></span
          >
          <a-menu-item key="15"> 运营管理-优惠券 </a-menu-item>
          <a-menu-item key="16"> Banner管理 </a-menu-item>
          <a-menu-item key="1600">运营账号生成</a-menu-item>
          <a-menu-item key="1601">签到活动</a-menu-item>
          <a-menu-item key="1602">官方推荐-列表</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub8">
          <span slot="title"
            ><a-icon type="setting" /><span>系统管理</span></span
          >
          <a-menu-item key="17"> 用户反馈 </a-menu-item>
          <a-menu-item key="18"> 用户举报 </a-menu-item>
          <a-menu-item key="1801">帮助中心管理</a-menu-item>
          <a-menu-item key="1802">公告管理</a-menu-item>
          <a-menu-item key="1803">支付管理</a-menu-item>
          <a-menu-item key="1804">提现管理</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub9">
          <span slot="title"><a-icon type="appstore" /><span>设置</span></span>
          <a-menu-item key="19"> 服务费率设置 </a-menu-item>
          <a-menu-item key="20"> 分享内容设置 </a-menu-item>
          <a-menu-item key="2001">订单退款设置</a-menu-item>
          <a-menu-item key="2002">遛狗价格设置</a-menu-item>
          <a-menu-item key="2003">热搜词条配置</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0; display: flex">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
        <h2>
          <span>{{ $route.meta.title ? $route.meta.title.yiji : "" }}</span
          >/
          <em>{{ $route.meta.title ? $route.meta.title.erji : "" }}</em>
        </h2>
      </a-layout-header>
      <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '280px',
        }"
      >
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  data() {
    return {
      collapsed: false,
      rootSubmenuKeys: ["sub1"],
      openKeys: ["sub1"],
    };
  },
  mounted() {
    console.log(this.$route.meta);
  },
  methods: {
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        (key) => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
  },
};
</script>
<style>
#components-layout-demo-custom-trigger {
  height: 100vh;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  margin: 16px;
}
#components-layout-demo-custom-trigger .header {
  /* height: 44px; */
  /* line-height: 44px; */
}

#components-layout-demo-custom-trigger .logo {
  height: 44px;
  vertical-align: top;
  margin-right: 16px;
  border-style: none;
}

#components-layout-demo-custom-trigger .title {
  height: 76px;
  line-height: 76px;
  display: inline-block;
}
.ant-menu-submenu .ant-menu-sub{
  background: rgb(240, 240, 240);
}
</style>
